<template>
  <page-header-wrapper style="min-width:1280px;">
    <template v-slot:content>
      <div class="page-header-content">
        <div class="avatar">
          <a-avatar size="large" :src="avatar" />
        </div>
        <div class="content">
          <div class="content-title">
            {{ timeFix }}，{{ user.UserName }}<span class="welcome-text"></span>
          </div>
          <div>{{ user.UserStation }} | {{ user.DeptName }}</div>
        </div>
      </div>
    </template>
    <div>
      <a-row type="flex" :gutter="24">
        <a-col :span="16">
          <a-card title="快速开始/便捷导航" :bodyStyle="{ padding: '12px' }">
            <a-button slot="extra" type="link">管理</a-button>
            <a-row style="height: 142px" type="flex" align="middle" justify="start">
              <a-col :span="3" v-for="(item, index) in routesData" :key="index" class="a-flex a-flex-column a-row-center">
                <router-link :to="item.path" tag="a" class="a-flex a-flex-column">
                  <div
                    class="a-flex a-row-center m-b-10"
                    style="width: 60px; height: 60px; background: rgba(62, 212, 167, 1); border-radius: 50%"
                  >
                    <a-icon :type="item.meta.icon" theme="filled" style="color: #fff; font-size: 28px" />
                  </div>
                  <span style="font-size: 16px; line-height: 20px;color: #333;">{{ item.meta.title }}</span>
                </router-link>
              </a-col>
            </a-row>
          </a-card>
          <a-card title="访问趋势" class="m-t-20">
            <echartsView height="408px" :options="options" :isDark="false"></echartsView>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card title="消息通知">
            <!-- <y-button slot="extra" type="link">更多</y-button> -->
            <Scrollbar style="height: 172px; background-color: #fff">
              <!-- <div class="a-line-1 m-b-10" v-for="index in 20" :key="index">
                <a-tag :color="index % 2 === 0 ? 'green' : 'blue'">{{ index % 2 === 0 ? '消息' : '通知' }}</a-tag>
                <span
                >这是一条很长的信息。这是一条很长的信息。这是一条很长的信息。这是一条很长的信息。这是一条很长的信息。</span
                >
              </div> -->
              <a-empty description="暂时没有消息通知哦"></a-empty>
            </Scrollbar>
          </a-card>
          <a-card title="更新日志" class="m-t-20">
            <Scrollbar style="height: 354px; background-color: #fff">
              <a-timeline >
                <a-timeline-item v-for="(item, index) in logsList" :key="index">
                  <div>{{ item.time }}</div>
                  <ul>
                    <li v-for="(j, k) in item.list" :key="k">{{ k + 1 }}.{{ j.content }}</li>
                  </ul>
                </a-timeline-item>
              </a-timeline>
            </Scrollbar>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </page-header-wrapper>
</template>

<script>
import { timeFix } from '@/utils/util'
import { mapState } from 'vuex'
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
import { Scrollbar, echartsView } from '@/components'
export default {
  name: 'Workplace',
  components: {
    PageHeaderWrapper,
    Scrollbar,
    echartsView
  },
  data () {
    return {
      timeFix: timeFix(),
      avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
      user: {},
      loading: true,
      options: {
        color: ['#ff9500', '#347ae2'],
        tooltip: {
          trigger: 'axis'
        },
        // textStyle: {
        //   color: '#333'
        // },
        legend: {
          data: ['手机端', 'PC端'],
          textStyle: {
            color: '#333'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
          axisLabel: {
            color: '#333'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#333'
          }
        },
        series: [
          {
            name: '手机端',
            type: 'line',
            stack: 'Total',
            smooth: true,
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'PC端',
            type: 'line',
            stack: 'Total',
            smooth: true,
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      },
      logsList: [
        {
          time: '2022-12-03',
          list: [
            {
              content: '优化了一些影响使用的问题'
            },
            {
              content: '租金管理调整缴租逻辑'
            }
          ]
        },
        {
          time: '2022-12-02',
          list: [
            {
              content: '仪表盘管理员工作台更改名称为“管理人员工作台”'
            },
            {
              content: '资产拆分，拆分时新增实际面积'
            },
            {
              content: '房源管理，物业修费菜单名称更改为“物业收费房屋”'
            }
          ]
        },
        {
          time: '2022-11-21',
          list: [
            {
              content: '租金管理，欠租催缴单调整内容'
            },
            {
              content: '新增物业费审核标准'
            },
            {
              content: '资产区域分布调整位置'
            }
          ]
        }
      ],
      routesData: []
    }
  },
  computed: {
    ...mapState({
      nickname: (state) => state.user.nickname,
      welcome: (state) => state.user.welcome
    }),
    userInfo () {
      return this.$store.getters.userInfo
    }
  },
  created () {
    this.user = this.userInfo
    if (this.userInfo.UserHeadPhoto) {
      this.avatar = process.env.VUE_APP_API_BASE_URL + this.userInfo.UserHeadPhoto
    }
    const routesArr = this.$store.getters.addRouters[0].children
    routesArr.forEach((item, index) => {
      if (item.children.length > 0 && index < 8) {
        this.routesData.push(item)
      }
    })
  },
  mounted () {},
  methods: {}
}
</script>

<style lang="less" scoped>
@import './Workplace.less';
// 隐藏横向滚动条
/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
